<template>
    <div>
        <h3>房型添加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称</td>
                    <td>
                        <input type="text" v-model="querinfo.HouseTypeName">
                    </td>
                </tr>

                <tr>
                    <td align="right">单价(元)</td>
                    <td>
                        <input type="text" v-model="querinfo.Price">
                    </td>
                </tr>

                <tr>
                    <td align="right">室内面积(平方米)</td>
                    <td>
                        <input type="text" v-model="querinfo.Aera">
                    </td>
                </tr>

                <tr>
                    <td align="right">最多入住人数</td>
                    <td>
                        <input type="text" v-model="querinfo.Count">
                    </td>
                </tr>

                <tr>
                    <td align="right">图片上传</td>
                    <td>
                        <input type="file" @change="upimg">
                        <img :src="querinfo.Photo" width="150" height="100">
                    </td>
                </tr>

                <tr>
                    <td align="right">房型描述</td>
                    <td>
                        <textarea cols="30" rows="5" v-model="querinfo.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right">是否有窗</td>
                    <td>
                        <input type="radio" :value="1" v-model="querinfo.IsWindow">是
                        <input type="radio" :value="0" v-model="querinfo.IsWindow">否
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="保存" @click="ok" class="btn btn-primary">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();

let querinfo:any=reactive({
 "HouseTypeName": "",
  "Price": "",
  "Aera": "",
  "Count": "",
  "Photo": "",
  "Desc": "",
  "IsWindow": "",
})

const ok=()=>{
    if(querinfo.HouseTypeName==""){
        alert('房型名称不能为空');
        return;
    }
    if(querinfo.Price==""){
        alert('单价不能为空');
        return;
    }
    if(querinfo.Aera==""){
        alert('室内面积不能为空');
        return;
    }
    if(querinfo.Count==""){
        alert('入住人数不能为空');
        return;
    }
    if(querinfo.Photo==""){
        alert('图片不能为空');
        return;
    }
    if(querinfo.Desc==""){
        alert('房型描述不能为空');
        return;
    }
    axios({
        method:"post",
        url:"/api/House/AddHouseType",
        data:querinfo
    })
    .then(res=>{
        if(res.data==-1){
            alert('房型名称重复')
        }
        else if(res.data>0){
            alert('添加成功')
            router.push('/housetypeshow')
        }
        else{
            alert('添加失败')
        }
    })
}



const upimg=(e:any)=>{
    var m=e.target.files[0];
    var d=new FormData();
    d.append('file',m);
    axios({
        method:"post",
        url:"/api/House/Upfile",
        data:d
    })
    .then(res=>{
        if(res.data=="格式错误"){
            alert('格式错误')
        }
        else if(res.data=="大于2MB"){
            alert('大于2MB')
        }
        else{
            querinfo.Photo=res.data
        }
    })
    .catch(err=>{
        console.log(err)
    })
}



</script>




<style scoped>

</style>